<template>
	<view class="container">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
			}"></view>
		<view class="heard">
			<view class="back" @tap="back">
				<image src="/static/images/back.png" mode="widthFix"></image>
			</view>
			<view class="heard_title">訂單詳情</view>
		</view>
		<view class="container_title" style="margin-bottom: 15rpx;">{{orderStatusText(orderInfo.status)}}</view>
		<view class="details">
			<view class="name">預約訂單</view>
			<view class="info">
				<view class="img">
					<u-image :src="orderInfo.room_image" :lazy-load="true"></u-image>
				</view>
				<view class="room_use">
					<view class="room_name">{{orderInfo.room_name}}</view>
					<view class="store_name">{{orderInfo.store_name}}</view>
				</view>
			</view>

			<view class="order_time">
				<view class="start_time">
					<text>{{orderStartDate(orderInfo.start)}}</text>
					<text style="margin-top:10rpx;font-size:30rpx;">{{orderTime(orderInfo.start)}}</text>
				</view>
				<view class="order_duration">
					<text>時長</text>
					<text
						style="margin-top:10rpx;font-size:30rpx;">{{orderDuration(orderInfo.start,orderInfo.end)}}</text>
				</view>
				<view class="start_time">
					<text>{{orderStartDate(orderInfo.end)}}</text>
					<text style="margin-top:10rpx;font-size:30rpx;">{{orderTime(orderInfo.end)}}</text>
				</view>
			</view>



			<view class="other" v-if="showMore">
				<view class="other_item">
					<view>訂單金額</view>
					<view style="color: #FA533D;font-weight: bold;">${{orderInfo.total_price }}</view>
				</view>
				<view class="other_item">
					<view>-會員折扣</view>
					<view style="font-weight: bold;">{{ setVipRate(storeInfo.vip_rate) }}</view>
				</view>
				<view class="other_item">
					<view>-電子票卷</view>
					<view style="font-weight: bold;">選擇票卷</view>
				</view>
				<view class="other_item">
					<view>支付金額</view>
					<view style="color: #FA533D;font-weight: bold;">${{orderInfo.pay_price}}</view>
				</view>
				<view class="other_item">
					<view>訂單編號</view>
					<view style="font-weight: bold;">{{orderInfo.order_no}}</view>
				</view>
				<view class="other_item">
					<view>下單時間</view>
					<view style="font-weight: bold;">{{orderInfo.time}}</view>
				</view>
				<view class="other_item">
					<view>支付方式</view>
					<view style="font-weight: bold;">{{setPayType(orderInfo.pay_type)}}</view>
				</view>
			</view>
			<view @click="showMore = !showMore" class="more_details">
				<text>{{showMore?'收起':'更多訂單詳情'}}</text>
				<u-icon v-if="!showMore" size="25" color="#39B19D" name="arrow-down-fill"></u-icon>
				<u-icon v-else size="25" color="#39B19D" name="arrow-up-fill"></u-icon>
			</view>
		</view>


		<!-- 設備控制 -->
		<view class="device_control" v-if="orderInfo.status === 33">
			<!-- <view class="device_control" v-if="orderInfo.status"> -->
			<!-- <view class="title">設備控制</view> -->
			<!-- <view class="device_list">

				<view class="device_item" v-for="item in orderInfo.equipment_list" :key="item.id">
					<view class="left">
						<view class="img">
							<u-image :src="baseImage(item.image)" mode="widthFix" :lazy-load="true"></u-image>
						</view>
						<view class="info">
							<text class="name" v-if="item.account_new">{{accountData(item.account_new).UserName}}</text>
							<text class="name" v-else>{{item.nickname}}</text>
							<text style="color: #FA533D;font-weight: 600;" class="password"
								v-if="item.account_new">{{accountData(item.account_new).Password}}</text>
						</view>
					</view>
					<view class="right" v-if="item.account_new">
						<view class="copy" @tap="copy(accountData(item.account_new).Password)">複製密碼</view>
					</view>
					<view class="right" v-if="item.type_id==9">
						<text style="margin-right: 15rpx;color:#FA533D;font-weight: 600;" @tap="copy(item.account)"
							class="password" v-if="item.type_id==9">{{item.account}}</text>
						<u-switch v-model="item.is_open" @change="changeSwitch($event,item)"></u-switch>
					</view>
				</view>

			</view> -->

			<view class="equipment_item" v-if="item.type_id == 8 || item.type_id == 9"
				v-for="item in orderInfo.equipment_list" :key="item.id">
				<view class="equipment_image">
					<u-image :src="baseImage(item.image)" mode="widthFix" :lazy-load="true"></u-image>
				</view>
				<view class="equipment_name">
					{{ item.type_id == 8 ? accountData(item.account_new).UserName : item.nickname}}
				</view>
				<view class="equipment_text">{{item.type_id == 8 ? '藍牙密碼' : '密碼'}}</view>
				<view class="equipment_password"
					@tap="item.type_id == 8 ?copy(accountData(item.account_new).Password) : copy(item.account)">
					{{ item.type_id == 8 ? accountData(item.account_new).Password : item.account }}
				</view>
				<view class="equipment_operate">
					<u-switch v-if="item.type_id == 9" v-model="item.is_open"
						@change="changeSwitch($event,item)"></u-switch>
					<view class="copy" v-if="item.type_id == 8" @tap="copy(accountData(item.account_new).Password)">複製密碼
					</view>
				</view>
			</view>

		</view>

		<!-- 下單須知 -->
		<view class="order_tips">
			<view class="title">下單須知</view>
			<view class="order_tips_item" v-if="!notice">
				<view class="">1.訂單保留15分鐘，15分鐘自動確認到店</view>
				<view class="">2.訂單最多可提前60分鐘確認到店(前面沒其他客人)</view>
				<view class="">3.如需取消，請聯繫客服人員</view>
			</view>
			<view class="order_tips_item" v-else>
				<view class="" v-for="(item,index) in notice" :key="index">{{item}}</view>
			</view>
		</view>


		<view class="btns">
			<view class="btns_item" style="border-color: #ff914d;background-color: #ff914d;color: #fff;"
				v-if="orderInfo.status==10" @tap="openPaymentPopup">立即付款</view>
			<view class="btns_item" v-if="orderInfo.status==33" @tap="showOrderEnd=true">提前離店</view>
			<view class="btns_item" v-if="orderInfo.status==33 || orderInfo.status === 30" @tap='showChangeRoom'>更換位置
			</view>
			<view class="btns_item" @tap="showOrderCancel=true" v-if="orderInfo.status==10 || orderInfo.status==30">取消訂單
			</view>
			<view class="btns_item" v-if="orderInfo.status==30" @tap="showArrivalStore"
				style="background-color: #39B19D;color: #fff;">確認到店</view>
			<view class="btns_item" @tap="extend_order" v-if="orderInfo.status==33">續單</view>
		</view>


		<u-popup :show="showExtendPopup" @close="showExtendPopup=false" :closeOnClickOverlay="true" round="16">
			<view class="extend_box">
				<view class="duration" @tap="showDurationPicker">
					<text>延長時間：</text>
					<input :value="value" type="text" placeholder="選擇延長時間">
				</view>

			</view>

			<u-picker :columns="durationList" confirmText="確認" @confirm="confirmDuration"
				@cancel="showDurationPopup=false" @close="showDurationPopup=false" :closeOnClickOverlay="true"
				:show="showDurationPopup"></u-picker>

		</u-popup>

		<u-picker :show="showChangeRoomPicker" confirmText="確認" @confirm='confirmChangeRoom' :columns="changeRoomList"
			@cancel='showChangeRoomPicker=false' @close='showChangeRoomPicker=false' :closeOnClickOverlay='true'
			keyName="name"></u-picker>

		<u-modal :show="showOrderCancel" @confirm='orderCancel' confirmText="確認" :showCancelButton='true'
			:closeOnClickOverlay='true' @close='showOrderCancel=false' @cancel='showOrderCancel=false'>
			<view class="">是否確定取消訂單</view>
		</u-modal>

		<u-modal :show="showSecConfirm" @confirm='confirmChange' confirmText="確認" :showCancelButton='true'
			:closeOnClickOverlay='true' @close='showSecConfirm=false' @cancel='showSecConfirm=false'>
			<view class="">是否確定更換包廂</view>
		</u-modal>

		<u-modal :show="showOrderEnd" confirmText="確認" @confirm='orderEndFn' :showCancelButton='true'
			:closeOnClickOverlay='true' @close='showOrderEnd=false' @cancel='showOrderEnd=false'>
			<view class="">是否確定提前離店</view>
		</u-modal>

		<u-popup round="16" mode="center" @close="show=false" :closeOnClickOverlay="true" :show="show">
			<view class="con_arrival_store">
				<view class="title">訂單確認開始</view>
				<view v-if="roomStatus==2" style="text-align: center;margin: 20rpx 0;font-size: 40rpx;color: #ff914d;"
					class="">該包廂還未打掃，確認是否到店</view>

				<!-- <view class="old_time" style="color: #39B19D;">{{nowTime}}</view> -->

				<view class="game_time">
					<view class="start">
						<view class="">{{setOrderStartTime('s', 'time')}}</view>
						<view class="date">{{setOrderStartTime('s', 'date')}}</view>
					</view>
					<view class="duration">共{{setOrderStartTime('d')}}小時</view>
					<view class="start">
						<view class="">{{setOrderStartTime('e','time')}}</view>
						<view class="date">{{setOrderStartTime('e','date')}}</view>
					</view>
				</view>

				<view class="old_time">是否開始訂單？</view>
				<view class="popupbtns">
					<!-- <view class="cancel">取消</view> -->
					<!-- <view class="early_start" @tap='early_start'>開始</view> -->
					<u-button @click="show=false" text="取消"></u-button>
					<u-button class="custom-style" @click="early_start" text="開始"></u-button>
				</view>

			</view>
		</u-popup>

		<u-popup :closeOnClickOverlay="true" @close="showPeymentPopup=false" :show="showPeymentPopup" round="10">
			<view class="pay_box">
				<view class="title">立即付款</view>
				<view class="money">${{orderInfo.total_price}}</view>
				<view class="pay_type">
					<u-radio-group placement="column" v-model="radioValue" @change="groupChane">
						<u-radio customStyle="margin:0 30rpx 30rpx;" labelSize="20" activeColor="#ff914d" size="20"
							iconSize="20" v-for="item in pay_type" :label="item.name" :name="item.name"></u-radio>
					</u-radio-group>
					<view v-if="radioValue=='餘額付款'" class="balance">餘額：${{userStoreInfo.balance}}</view>
				</view>

				<view class="pay_type">
					<u-button @click="confirmPay" class="custom-style" text="立即支付"></u-button>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import baseURL from '@/utils/baseURL.js'
	import {
		getOrderDetails,
		userConfirmArraivalStore,
		getChangeRoomList,
		exChangeRoom,
		advanceOrderEnd,
		cancelOrder,
		equipmentChangStatus,
		queryRoomStatus,
		orderPay,
		getLinePayInfo,
		getOrderNotice
	} from '@/api/order.js'
	import {
		getStoreInfo,
		getUserCouponAll,
		getUserStoreInfo
	} from '@/api/me.js'

	export default {
		data() {
			return {
				orderInfo: '',
				show: false,
				nowTime: '',
				showChangeRoomPicker: false,
				changeRoomList: [],
				changeRoomInfo: '',
				showSecConfirm: false,
				showOrderEnd: false,
				showOrderCancel: false,
				showExtendPopup: false,
				storeInfo: '',
				showDurationPopup: false,
				durationList: [],
				extendDuration: '',
				value: '',
				value1: '',
				coupon: null,
				couponList: [],
				statusBarHeight: 0,
				storeId: '',
				roomStatus: '',
				showPeymentPopup: false,
				// orderInfo: {},
				pay_type: [{
						name: '餘額付款'
					},
					// {
					// 	name: '信用卡/轉帳 藍新'
					// },
					// {
					// 	name: '信用卡/轉帳 緑界'
					// }
				],
				radioValue: '餘額付款',
				userStoreInfo: {},
				showMore: false,
				first: false,
				isLinePay: { // 判断是否唤醒linepay 支付
					flag: false,
					info: null,
				},
				orderId: '',
				notice: null,
			};
		},
		onLoad(option) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.orderId = option.id
		},
		onShow() {
			getOrderDetails({
				order_id: this.orderId
			}).then(res => {
				this.orderInfo = res.data
				// console.log(res.data, '訂單詳情')
			}).then(() => {
				getStoreInfo({
					store_id: this.orderInfo.store_id
				}).then(res => {
					this.storeInfo = res.data
					this.getOrderNoticeFn(this.orderInfo.store_id)
				})
			})

			this.linePayFn()
		},
		methods: {
			orderStatusText(status) {
				switch (status) {
					case 10:
						return '待付款';
					case 20:
						return '已取消';
					case 30:
						return '待使用';
					case 31:
						return '已使用';
					case 32:
						return '已過期';
					case 33:
						return '進行中';
					case 40:
						return '待退款';
					case 41:
						return '已退款';
				}
			},
			orderStartDate(date) {
				let a = new Date(date * 1000)
				let year = a.getFullYear()
				let month = this.montage(a.getMonth() + 1)
				let day = this.montage(a.getDate())
				let b = a.getDay()
				let c = year + '-' + month + '-' + day
				return this.setWeek(c, b)
			},
			orderTime(date) {
				let a = new Date(date * 1000)
				let h = this.montage(a.getHours())
				let m = this.montage(a.getMinutes())
				return h + ":" + m
			},
			setWeek(date, week) {
				switch (week) {
					case 0:
						return date + '週日';
					case 1:
						return date + '週一';
					case 2:
						return date + '週二';
					case 3:
						return date + '週三';
					case 4:
						return date + '週四';
					case 5:
						return date + '週五';
					case 6:
						return date + '週六';
				}
			},
			montage(num) {
				return num >= 10 ? num : '0' + num
			},
			orderDuration(start, end) {
				let a = end - start
				let h = Math.floor(a / 60 / 60)
				let m = Math.floor(a % (60 * 60) / 60)
				if (m > 0) {
					return h + '小時' + this.montage(m) + '分鐘'
				} else {
					return h + '小時'
				}
			},
			copy(str) {
				// console.log(str)
				uni.setClipboardData({
					// data: info.Password, // 複製內容
					data: str, // 複製內容
					success: () => {
						uni.showToast({
							title: '複製成功'
						})
					}
				})
			},
			openWIFI() {
				// console.log('11')
				var main = plus.android.runtimeMainActivity()
				var Intent = plus.android.importClass("android.content.Intent")
				var mIntent = new Intent('android.setting.WIFI_SETTINGS')
				main.startActivity(mIntent)
			},
			showArrivalStore() {
				// this.show = true

				queryRoomStatus({
					room_id: this.orderInfo.room_id
				}).then(res => {
					// console.log(res.data[0], '包廂狀態')
					this.roomStatus = res.data[0]
					this.show = true
				})

				this.arrivalStoreTime()
			},
			arrivalStoreTime() {
				let a = new Date()
				// 訂單結束時間

				let orderStart = this.orderInfo.start * 1000
				let nowStamp = a.getTime()
				// console.log(a.getTime(),'當前時間戳',this.orderInfo.start)

				let y = a.getFullYear()
				let m = this.montage(a.getMonth() + 1)
				let d = this.montage(a.getDate())
				let h = this.montage(a.getHours())
				let min = this.montage(a.getMinutes())
				let w = a.getDay()
				let day = y + '-' + m + '-' + d

				if (nowStamp >= orderStart) {

					let orderEnd = new Date(this.orderInfo.end * 1000)
					let endY = orderEnd.getFullYear()
					let endM = this.montage(orderEnd.getMonth() + 1)
					let endD = this.montage(orderEnd.getDate())
					let endH = this.montage(orderEnd.getHours())
					let endMin = this.montage(orderEnd.getMinutes())
					let endW = orderEnd.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
					// console.log(orderEnd,'訂單結束時間')

					return
				}


				// this.nowTime = this.setWeek(day, w) + " " + h + ":" + min
				let duration = this.orderDuration(this.orderInfo.start, this.orderInfo.end)
				// let duration = '2小時30分鐘'
				let minFlag = duration.indexOf('分鐘')
				if (minFlag == -1) {
					let c = Number(duration.split('小時')[0]) * 60 * 60 * 1000
					let end = new Date(a.getTime() + c)
					let endY = end.getFullYear()
					let endM = this.montage(end.getMonth() + 1)
					let endD = this.montage(end.getDate())
					let endH = this.montage(end.getHours())
					let endMin = this.montage(end.getMinutes())
					let endW = end.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
				} else {
					let hour = Number(duration.split('小時')[0])
					let minute = Number(duration.split('小時')[1].split('分鐘')[0])
					let c = hour * 60 * 60 * 1000 + minute * 60 * 1000
					let end = new Date(a.getTime() + c)
					let endY = end.getFullYear()
					let endM = this.montage(end.getMonth() + 1)
					let endD = this.montage(end.getDate())
					let endH = this.montage(end.getHours())
					let endMin = this.montage(end.getMinutes())
					let endW = end.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
				}
			},
			early_start() {
				userConfirmArraivalStore({
					order_id: this.orderInfo.id
				}).then(res => {
					this.show = false
					if (res.code !== 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					}
					return res
				}).then((res) => {
					console.log(res, '确认到店')
					if (res.code !== 1) return
					getOrderDetails({
						order_id: this.orderInfo.id
					}).then(res => {
						this.orderInfo = res.data
						// console.log(res.data, '訂單詳情')
					})
				})
			},
			showChangeRoom() {
				getChangeRoomList({
					order_id: this.orderInfo.id
				}).then(res => {
					// console.log(res.data, '更換包廂列表')
					if (res.data.length) {
						this.showChangeRoomPicker = true
						this.changeRoomList = [
							[...res.data]
						]
					} else {
						uni.showToast({
							title: '當前沒有可更換的包廂',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			confirmChangeRoom(e) {
				this.showChangeRoomPicker = false
				this.changeRoomInfo = e.value[0]
				console.log(this.changeRoomInfo)
				this.showSecConfirm = true
			},
			confirmChange() {
				exChangeRoom({
					order_id: this.orderInfo.id,
					room_id: this.changeRoomInfo.id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})

						getOrderDetails({
							order_id: this.orderInfo.id,
						}).then(res => {
							this.orderInfo = res.data
							// console.log(res.data, '訂單詳情')
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					this.showSecConfirm = false
				})
			},
			orderEndFn() {
				advanceOrderEnd({
					order_id: this.orderInfo.id,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
						this.showOrderEnd = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					getOrderDetails({
						order_id: this.orderInfo.id
					}).then(res => {
						this.orderInfo = res.data
						console.log(res.data, '訂單詳情')
					})
				})

			},
			orderCancel() {
				cancelOrder({
					order_id: this.orderInfo.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					getOrderDetails({
						order_id: this.orderInfo.id
					}).then(res => {
						this.orderInfo = res.data
						console.log(res.data, '訂單詳情')
					})
				})
				this.showOrderCancel = false
			},
			showDurationPicker() {
				this.showDurationPopup = true
				this.setExtendDuration(this.storeInfo.store_config.order_continuation_min, this.storeInfo.store_config
					.order_continuation_max)
			},
			setExtendDuration(min, max) {
				let minTime = this.timeStamp(min)
				let maxTime = this.timeStamp(max)
				let arr = []
				for (var i = minTime; i <= maxTime; i += minTime) {
					arr.push(i)
				}
				let arr1 = arr.map(item => this.stampTime(item))
				this.durationList = [
					[...arr1]
				]
			},
			timeStamp(time) {
				let h = Number(time.split(":")[0])
				let m = Number(time.split(":")[1])
				return h * 60 * 60 * 1000 + m * 60 * 1000
			},
			stampTime(num) {
				let h = Math.floor(num / 60 / 60 / 1000)
				let m = Math.floor((num % (60 * 60 * 1000)) / 60 / 1000)
				if (m > 0) {
					return h + '小時' + m + '分鐘'
				} else {
					return h + '小時'
				}
			},
			confirmDuration(e) {
				console.log(e.value[0])
				this.value = e.value[0]
				if (e.value[0].indexOf('分鐘') == -1) {
					let h = e.value[0].split('小時')[0]
					this.extendDuration = h + ':00'
				} else {
					let h = e.value[0].split('小時')[0]
					let m = e.value[0].split('小時')[1].split('分鐘')[0]
					this.extendDuration = h + ':' + m
				}
				this.showDurationPopup = false
			},
			extend_order() {
				this.$store.commit('updateOrderInfo', this.orderInfo)
				uni.navigateTo({
					// url: `/pages/order_details/extend_order/extend_order?orderInfo=${JSON.stringify(this.orderInfo)}`
					url: `/pages/order_details/extend_order/extend_order`
				})
			},
			setVipRate(rate) {
				if (rate == 0 || rate == 10) {
					return 0
				} else {
					return rate + '折'
				}
			},
			baseImage(url) {
				return baseURL + url
			},
			accountData(data) {
				if (!data) return {}
				return JSON.parse(data)
			},
			back() {
				uni.reLaunch({
					url: '/pages/order/order'
				})
			},
			changeSwitch(event, item) {
				console.log(event, item)
				equipmentChangStatus({
					room_id: this.orderInfo.room_id,
					equipmentID: item.equipmentID,
					is_open: event ? 1 : 0
				}).then(res => {
					// console.log(res)
				})
			},
			setPayType(type) {
				switch (type) {
					case 1:
						return '信用卡/轉賬 藍新';
					case 2:
						return '信用卡/轉賬 緑界';
					case 4:
						return 'Line Pay';
					case 5:
						return '現金支付';
					case 6:
						return '餘額支付';
					case 7:
						return '儲值卡支付';
					case 9:
						return 'Apple Pay';
				}
			},
			openPaymentPopup() {
				this.showPeymentPopup = true
				this.getUserStoreInfoFn()
			},
			getUserStoreInfoFn() {
				getUserStoreInfo({
					store_id: this.orderInfo.store_id
				}).then(res => {
					this.userStoreInfo = res.data
					this.setPayment(res.data.pay_type_list)
				})
			},
			setPayment(arr) {
				if (this.first) return
				this.first = true
				arr.forEach(item => {
					switch (item) {
						case 1:
							this.pay_type.push({
								name: '信用卡/轉帳 藍新'
							})
							break;
						case 2:
							this.pay_type.push({
								name: '信用卡/轉帳 緑界'
							})
							break;
						case 4:
							if (this.orderInfo.store_id == 76) {
								this.pay_type.push({
									name: 'Line Pay'
								})
							}

							break;
						case 9:
							if (this.orderInfo.store_id == 76) {
								this.pay_type.push({
									name: 'Apple pay'
								})
							}

							break;
						case 10:
							this.pay_type.push({
								name: 'Google pay'
							})
							break;
					}
				})
			},
			groupChane(e) {
				this.radioValue = e
			},
			confirmPay() {
				// console.log(this.orderInfo)
				let pay_type = ''
				switch (this.radioValue) {
					case '信用卡/轉帳 藍新':
						pay_type = 1
						break;
					case '信用卡/轉帳 緑界':
						pay_type = 2
						break;
					case '超商付款':
						pay_type = 3
						break;
					case 'Line Pay':
						pay_type = 4
						break;
					case '儲值機':
						pay_type = 5
						break;
					case '餘額付款':
						pay_type = 6
						break;
					case '儲值卡':
						pay_type = 7
						break;
					case '電子票券':
						pay_type = 8
						break;
					case 'Apple Pay':
						pay_type = 9
						break;
				}
				this.paymentFn(pay_type)
			},
			paymentFn(pay_type) {
				const params = {
					order_id: this.orderInfo.id,
					pay_type
				}

				if (pay_type == 6) {
					if (this.orderInfo.total_price > this.userStoreInfo.balance) {
						uni.showToast({
							title: '餘額不足',
							icon: 'none'
						})
						return
					}
				}

				orderPay(params).then(res => {
					this.paymentResult(res, pay_type)
				})
			},
			paymentResult(res, pay_type) {
				if (res.code !== 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.setStorageSync('MerchantTradeNo', res.data.MerchantTradeNo)
					this.showPeymentPopup = false
					switch (pay_type) {
						case 1:
							uni.navigateTo({
								url: `/pages/book_now/outward_payment/outward_payment?payData=${JSON.stringify(res.data)}&type=1`
							})
							break;
						case 2:
							uni.navigateTo({
								url: `/pages/book_now/outward_payment/outward_payment?form=${JSON.stringify(res.data)}&type=2`
							})
							break;
						case 6:
							uni.showToast({
								title: '付款成功',
								icon: 'success'
							})
							getOrderDetails({
								order_id: this.orderId
							}).then(res => {
								this.orderInfo = res.data
							})
							break;
						case 4:
							this.wakeUp(res.data.result)
							this.isLinePay = {
								flag: true,
								info: res.data.pay_log
							}
							break;
						case 9:
							uni.navigateTo({
								url: `/pages/book_now/outward_payment/outward_payment?AppleForm=${JSON.stringify(res.data)}&type=9`
							})
							break;
					}
				}
			},
			wakeUp(path) {
				const systemInfo = uni.getSystemInfoSync()
				// #ifdef APP-PLUS
				if (systemInfo.platform === 'Android') {
					const params = {
						pname: 'jp.naver.line.android',
						action: 'line://'
					}
					if (this.determine(params)) {
						// 已下載line pay
						plus.runtime.openURL(path, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					} else {
						plus.runtime.openURL(`market://details?id=${params.pname}`, function() {
							// plus.nativeUI.alert('本機未安裝指定的應用')
						})
					}
				} else if (systemInfo.platform === 'ios') {
					const params = {
						appid: ''
					}
					plus.runtime.launchApplication({
						action: path
					}, function() {
						plus.nativeUI.actionSheet({
							title: '應用市場',
							cancel: '取消',
							buttons: [{
								title: '應用市場'
							}]
						}, function({
							index
						}) {
							switch (index) {
								case 1:
									plus.runtime.openURL(
										`itms-apps://itunes.apple.com`,
										function() {
											// plus.nativeUI.alert('本機未安裝指定的應用')
										})
							}
						})
					})
					// this.determine()
					plus.runtime.openURL(path, function() {
						// plus.nativeUI.alert('本機未安裝指定的應用')
					})
				}
				// #endif

				// #ifdef H5
				// uni.navigateTo({
				// 	url: `/pages/book_now/outward_payment/outward_payment?url=${path}&type=4`
				// })

				const userAgent = navigator.userAgent
				if (/(Android)/i.test(userAgent)) {
					// Android平台
					window.location.href = path
				} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
					// ios平台
					window.location.href = path
				}

				// #endif

			},
			determine() {
				const install = plus.runtime.isApplicationExist()
				return install
			},
			linePayFn() {
				if (this.isLinePay.flag && this.isLinePay.info) {
					uni.showLoading({
						title: '加载中...'
					})
					setTimeout(() => {
						getLinePayInfo({
							...this.isLinePay.info
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 6000
								})
								setTimeout(() => {
									// uni.reLaunch({
									// 	url: `/pages/order_details/order_details?id=${res.data.id}`
									// })
									getOrderDetails({
										order_id: this.orderInfo.id
									}).then(res => {
										this.orderInfo = res.data
									})
								}, 1500)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 6000
								})
							}
						})
					}, 1000)
				}
			},
			setOrderStartTime(soe, type) {
				const start = new Date(this.orderInfo.start * 1000)
				const end = new Date(this.orderInfo.end * 1000)
				const duration = Math.floor((this.orderInfo.end - this.orderInfo.start) / 60 / 60)
				const sY = start.getFullYear()
				const sM = start.getMonth() + 1 < 10 ? '0' + (start.getMonth() + 1) : start.getMonth() + 1
				const sD = start.getDate() < 10 ? '0' + start.getDate() : start.getDate()
				const sH = start.getHours() < 10 ? '0' + start.getHours() : start.getHours()
				const sMin = start.getMinutes() < 10 ? '0' + start.getMinutes() : start.getMinutes()
				const eY = end.getFullYear()
				const eM = end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1
				const eD = end.getDate() < 10 ? '0' + end.getDate() : end.getDate()
				const eH = end.getHours() < 10 ? '0' + end.getHours() : end.getHours()
				const eMin = end.getMinutes() < 10 ? '0' + end.getMinutes() : end.getMinutes()
				if (soe == 's') {
					return type == 'date' ? sY + '-' + sM + '-' + sD : sH + ':' + sMin
				} else if (soe == 'e') {
					return type == 'date' ? eY + '-' + eM + '-' + eD : eH + ':' + eMin
				} else {
					return duration
				}
			},
			getOrderNoticeFn(store_id) {
				getOrderNotice({
					store_id
				}).then(res => {
					// console.log(res, '下單須知')
					if (res.data) {
						const se = /[；。\n]/
						this.notice = res.data.split(se)
						// console.log(this.notice, '下單須知')
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.container {
		// padding: 30rpx;
		box-sizing: border-box;
		min-height: calc(100vh - 90rpx);
		background: #F3F5F9;
		// position: relative;

		.heard {
			width: 100%;
			height: 90rpx;
			background-color: #39B19D;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: 600;

			// position: relative;
			// position: absolute;
			// top: 0%;
			// left: 0;

			.back {
				position: absolute;
				left: 30rpx;

				image {
					width: 40rpx;
				}
			}
		}

		.container_title {
			// width: 690rpx;
			// margin-top: 90rpx;
			height: 67rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin: 15rpx 30rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding-left: 14rpx;
			color: #39B19D;
			line-height: 67rpx;

		}

		.details {
			margin: 0rpx 30rpx;
			padding: 21rpx 17rpx 30rpx 27rpx;
			box-sizing: border-box;
			// height: 1018rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.name {
				font-size: 28rpx;
				margin-bottom: 15rpx;
				font-weight: bold;
				display: flex;
				align-items: center;

				&::before {
					content: '';
					display: inline-block;
					width: 6rpx;
					height: 38rpx;
					background: #39B19D;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-right: 7rpx;
				}
			}

			.info {
				display: flex;
				margin-bottom: 20rpx;

				.img {
					width: 125rpx;
					height: 95rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin-right: 18rpx;

					/deep/ .u-image {
						width: 125rpx !important;
						height: 95rpx !important;
						border-radius: 16rpx !important;
					}

					/deep/ .u-image__image {
						width: 125rpx !important;
						height: 95rpx !important;
						border-radius: 16rpx !important;
					}

					/deep/ .u-image__error {
						width: 125rpx !important;
						height: 95rpx !important;
						border-radius: 16rpx !important;
					}

					/deep/ .u-image__loading {
						width: 125rpx !important;
						height: 95rpx !important;
						border-radius: 16rpx !important;
					}
				}

				.room_use {
					.room_name {
						font-size: 30rpx;
						margin: 4rpx 0 16rpx;
						font-weight: bold;
					}

					.store_name {
						font-size: 30rpx;
					}

					.time {
						display: flex;

						.time_box {
							text-align: center;

							&:nth-child(2) {
								margin: 0 10rpx;
							}

							view {
								color: #999;
								font-size: 20rpx;

								&:last-child {
									font-size: 24rpx;
									color: #000;
									margin-top: 10rpx;
								}
							}
						}
					}
				}
			}

			.order_time {
				width: 650rpx;
				height: 89rpx;
				background: #F0FDF8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				margin: 0 auto 39rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.start_time,
				.order_duration {
					font-size: 28rpx;
					color: #39B19D;
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			.other {
				.other_item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 16rpx;

					view {
						font-size: 34rpx;
					}
				}
			}

			.more_details {
				margin: 10rpx 30rpx;
				background-color: #39b19d61;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				font-weight: 600;
				border-radius: 60rpx;
				color: #000;
			}
		}

		.device_control {
			width: 690rpx;
			min-height: 177rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: 35rpx 0 30rpx;
			padding: 11rpx 17rpx 30rpx;
			box-sizing: border-box;
			margin: 0 auto;

			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
				display: flex;
				align-items: center;
				margin-bottom: 23rpx;

				&:before {
					content: "";
					width: 6rpx;
					height: 38rpx;
					background: #39B19D;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-right: 7rpx;
				}
			}

			.device_list {
				.device_item {
					// width: 659rpx;
					height: 77rpx;
					background: #F0FDF8;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.left {
						display: flex;
						align-items: center;

						.img {
							margin-right: 10rpx;

							image {
								width: 40rpx;
							}

							/deep/ .u-image {
								width: 40rpx !important;
								height: 40rpx !important;
							}

							/deep/ .u-image__image {
								width: 40rpx !important;
								height: 40rpx !important;
							}

							/deep/ .u-image__error {
								width: 40rpx !important;
								height: 40rpx !important;
							}

							/deep/ .u-image__loading {
								width: 40rpx !important;
								height: 40rpx !important;
							}
						}

						.info {
							display: flex;
							flex-direction: column;

							.name {
								font-size: 30rpx;
								font-weight: bold;
								color: #000;
							}

							.password {
								font-size: 26rpx;
								color: #999;
							}
						}
					}

					.right {
						display: flex;
						align-items: center;

						.copy {
							width: 115rpx;
							height: 38rpx;
							border-radius: 19rpx 19rpx 19rpx 19rpx;
							opacity: 1;
							border: 1rpx solid #707070;
							font-size: 18rpx;
							text-align: center;
							line-height: 38rpx;
							margin-right: 15rpx;
						}

						.connect {
							width: 115rpx;
							height: 38rpx;
							background: #39B19D;
							border-radius: 19rpx 19rpx 19rpx 19rpx;
							opacity: 1;
							font-size: 18rpx;
							text-align: center;
							line-height: 38rpx;
							color: #fff;
						}
					}
				}
			}

			.equipment_item {
				width: 49%;
				// height: 100rpx;
				padding: 10rpx;
				border: 1rpx solid #39B19D;
				border-radius: 20rpx;
				background-color: #39b19d61;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.equipment_image {
					display: flex;
					justify-content: center;

					::v-deep .u-image {
						width: 50rpx !important;
						height: 50rpx !important;
					}

					::v-deep .u-image__image {
						width: 50rpx !important;
						height: 50rpx !important;
					}

					::v-deep .u-image__loading {
						width: 50rpx !important;
						height: 50rpx !important;
					}

					::v-deep .u-image__error {
						width: 50rpx !important;
						height: 50rpx !important;
					}
				}

				.equipment_name {
					text-align: center;
					font-size: 36rpx;
				}

				.equipment_text {
					color: #ff914d;
					text-align: center;
				}

				.equipment_password {
					color: #ff914d;
					text-align: center;
					font-size: 34rpx;
					font-weight: 600;
				}

				.equipment_operate {
					margin-top: 10rpx;
					display: flex;
					justify-content: center;

					.copy {
						width: 115rpx;
						height: 38rpx;
						border-radius: 19rpx 19rpx 19rpx 19rpx;
						opacity: 1;
						border: 1rpx solid #707070;
						font-size: 18rpx;
						text-align: center;
						line-height: 38rpx;
						margin-right: 15rpx;
					}
				}
			}
		}

		.order_tips {
			// width: 690rpx;
			// height: 144rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 11rpx 17rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 36rpx;
			margin: 30rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				&:before {
					content: "";
					width: 6rpx;
					height: 38rpx;
					background: #39B19D;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-right: 7rpx;
				}
			}

			.order_tips_item {
				font-size: 28rpx;
				margin-left: 33rpx;
			}
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 30rpx;
			margin-right: 30rpx;

			.btns_item {
				width: 200rpx;
				height: 60rpx;
				opacity: 1;
				border: 1rpx solid #39B19D;
				font-size: 26rpx;
				text-align: center;
				line-height: 60rpx;
				color: #39B19D;
				border-radius: 40rpx;
				margin-left: 10rpx;
			}
		}

		.con_arrival_store {
			width: 624rpx;
			min-height: 441rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 35rpx;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 10rpx;
				text-align: center;
			}

			.game_time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 90%;
				border-radius: 10rpx;
				background-color: #ccc;
				padding: 10rpx;
				margin: 10rpx auto;

				.start {
					font-size: 60rpx;
					text-align: center;

					.date {
						font-size: 26rpx;
					}
				}

				.duration {
					font-size: 28rpx;
					margin: 0 20rpx;
					// text-decoration: underline dotted;
					border-bottom: 1rpx dotted #000;
					padding-bottom: 10rpx;
				}
			}

			.old_time {
				text-align: center;
				font-size: 28rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.popupbtns {
				width: 543rpx;
				display: flex;
				// position: absolute;
				bottom: 20rpx;

				.custom-style {
					background-color: #39B19D;
					color: #fff;
				}
			}

			.early_start {
				height: 82rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 82rpx;
				margin-top: 10rpx;
				// position: absolute;
				// bottom: 20rpx;
			}
		}

		.extend_box {
			height: 65vh;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.duration {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				input {
					margin-left: 20rpx;
					border: 1rpx solid #000;
					border-radius: 16rpx;
					padding: 5rpx;
					text-align: center;
				}
			}
		}
	}

	.pay_box {
		height: 60vh;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.money {
			color: #ff914d;
			font-weight: 600;
			font-size: 48rpx;
			text-align: center;
			margin-bottom: 60rpx;
		}

		.pay_type {
			margin-top: 100rpx;
			position: relative;

			.balance {
				position: absolute;
				top: 0rpx;
				right: 0%;
				font-size: 30rpx;
				color: #ff914d;
			}

			.custom-style {
				background-color: #39B19D;
				color: #fff;
				width: 500rpx;
			}
		}

	}
</style>